<!--  -->
<template>
  <div class="qproje">
    <div class="conts">
      <div class="ips">
        <el-select v-model="value" placeholder="全部团队">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="shows">
        <div class="qian">
          <div class="ts">
            <ul class="zhan">
              <li>签约概况</li>
              <li>签约个数</li>
              <li>56</li>
            </ul>
            <ul class="yan">
              <li>签约金额</li>
              <li>
                <p>234 <i>亿</i></p>
              </li>
            </ul>
            <div class="ico">
              <i class="el-icon-warning-outline"></i>
            </div>
          </div>
          <div class="tx">
            <span>月环比</span>
            <span>?</span>
            <span>11%</span>
          </div>
        </div>
        <div class="dao">
          <div class="ts">
            <ul class="zhan">
              <li>投资到位额</li>
              <li>已到位资金</li>
              <li>
                <p>2343 <i>亿</i></p>
              </li>
            </ul>
            <ul class="yan">
              <li>到位资金比</li>
              <li>23%</li>
            </ul>
            <div class="ico">
              <i class="el-icon-warning-outline"></i>
            </div>
          </div>
          <div class="tx">
            <span>月环比</span>
            <span>?</span>
            <span>11%</span>
          </div>
        </div>
        <div class="mu">
          <div class="ts">
            <ul class="du">
              <li>目标任务完成进度</li>
              <li>78%</li>
              <li>
                <el-progress :stroke-width="8" :percentage="78"></el-progress>
                <span></span>
                <span></span>
              </li>
            </ul>
          </div>
          <div></div>
        </div>
      </div>
      <div class="tavs">
        <h3>项目列表</h3>

        <p style="margin-top: 15px">查看更多&gt;</p>
      </div>
      <div class="tables">
        <el-table :data="tableData" style="width:100%" height="378">
          <el-table-column prop="date" label="项目名称/编号" width="350"> </el-table-column>
          <el-table-column
            prop="name"
            label="项目状态"
            width="120"
            :filters="[
              { text: '家', value: '家' },
              { text: '公司', value: '公司' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.address }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium" type="{scope.row.type}">{{ scope.row.name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="province"
            label="项目类型"
            width="120"
            :filters="[
              { text: '家', value: '家' },
              { text: '公司', value: '公司' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              {{ scope.row.province }}
            </template>
          </el-table-column>
          <el-table-column
            prop="city"
            label="投资额(万元)"
            width="160"
            :filters="[
              { text: '家', value: '家' },
              { text: '公司', value: '公司' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              {{ scope.row.city }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="承接平台"
            width="120"
            :filters="[
              { text: '家', value: '家' },
              { text: '公司', value: '公司' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              {{ scope.row.address }}
            </template>
          </el-table-column>
        </el-table>
        <div class="pags">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="100"
              background
              layout="total, sizes, prev, pager, next ,jumper"
              :total="400"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Qproje',
  components: {},
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      value: '',
      tableData: [
        {
          date: '三王山大酒店商业综合体休闲娱乐项目休闲…',
          name: '已签约',
          province: '第三产业',
          city: '10000',
          address: '综合招商小组',
          zip: 200333,
          type: '',
        },
        {
          date: '三王山大酒店商业综合体休闲娱乐项目休闲…',
          name: '再谈',
          province: '第三产业',
          city: '10000',
          address: '城建招商小组',
          zip: 200333,
          type: 'danger',
        },
        {
          date: '三王山大酒店商业综合体休闲娱乐项目休闲…',
          name: '再谈',
          province: '第三产业',
          city: '10000',
          address: '商贸服务业招…',
          zip: 200333,
          type: 'danger',
        },
        {
          date: '三王山大酒店商业综合体休闲娱乐项目休闲…',
          name: '开工中',
          province: '第三产业',
          city: '10000',
          address: '白马山度假小组',
          zip: 200333,
          type: 'success',
        },
        {
          date: '三王山大酒店商业综合体休闲娱乐项目休闲…',
          name: '已签约',
          province: '第三产业',
          city: '10000',
          address: '工业招商小组',
          zip: 200333,
          type: '',
        },
        {
          date: '三王山大酒店商业综合体休闲娱乐项目休闲…',
          name: '已签约',
          province: '第三产业',
          city: '10000',
          address: '工业招商小组',
          zip: 200333,
          type: '',
        },
      ],
    }
  },
  created() {},
  methods: {
      filterTag(value, row) {
        return row.tag === value;
      },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
  beforeDestroy() {},
}
</script>
<style lang='scss' scoped>
* {
  list-style: none;
}
.qproje {
  width: 100%;
  display: flex;
  flex-grow: 1;
  .conts {
    margin-left: 19px;

    height: 726px;
    .ips {
      width: 224px;
      height: 32px;
      margin: 22px 0 18px 0;
    }
    .shows {
      width: 100%;
      display: flex;
      flex-grow: 1;
      .qian {
        width: 33.3%;
        height: 174px;
        margin-right: 15px;
        border: 1px solid #e8e8e8;
        display: flex;
        flex-wrap: wrap;
        .ts {
          width: 100%;
          height: 132px;
          border-bottom: 1px solid #e8e8e8;
          display: flex;
          justify-content: space-between;
          position: relative;
          .ico {
            width: 14px;
            height: 14px;
            position: absolute;
            top: 24px;
            right: 19px;
          }
          .zhan {
            color: rgba(0, 0, 0, 0.85);
            li:nth-child(1) {
              font-size: 14px;
              width: auto;
              height: 24px;
              margin: 21px 0 0 26px;
              color: rgba(0, 0, 0, 0.85);
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
            }
            li:nth-child(2) {
              margin-top: 15px;
              width: auto;
              height: 20px;
              font-size: 12px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.45);
              margin-left: 26px;
            }
            li:nth-child(3) {
              width: auto;
              height: 32px;
              font-size: 24px;
              font-family: HelveticaNeue, HelveticaNeue-Medium;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.65);
              margin-left: 26px;
            }
          }
          .yan {
            width: 40%;
            margin: 60px 20px 0 0;
            height: 53px;
            li:nth-child(1) {
              font-size: 12px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.45);
            }
            li:nth-child(2) {
              p {
                float: left;
                font-size: 24px;
                font-family: HelveticaNeue, HelveticaNeue-Medium;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.65);
                i {
                  font-family: PingFangSC, PingFangSC-Medium;
                  width: 14px;
                  height: 20px;
                  font-size: 14px;
                  display: block;
                  float: right;
                  line-height: 36px;
                  margin-left: 15px;
                }
              }
            }
          }
        }
        .tx {
          width: 100%;
          height: 41px;
          span:nth-child(1) {
            display: inline-block;
            margin: 6px 8px 13px 21px;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
          }
          span:nth-child(2) {
            display: inline-block;
            width: 10px;
            height: 11px;
            border: 1px solid red;
            margin-top: 12px;
            margin-right: 4px;
            font-size: 10px;
            font-family: LastResort;
            color: #f5222d;
            line-height: 11px;
            text-align: center;
          }
          span:nth-child(3) {
            display: inline-block;
            font-family: HelveticaNeue;
            text-align: left;
            color: rgba(0, 0, 0, 0.85);
            line-height: 22px;
          }
        }
      }
      .dao {
        width: 33.3%;
        height: 174px;
        margin-right: 15px;
        border: 1px solid #e8e8e8;
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;
        .ts {
          width: 100%;
          height: 132px;
          border-bottom: 1px solid #e8e8e8;
          display: flex;
          flex-grow: 1;
          justify-content: space-between;
          position: relative;
          .ico {
            width: 14px;
            height: 14px;
            position: absolute;
            top: 24px;
            right: 19px;
          }
          .zhan {
            margin: 21px 0 0 26px;
            li:nth-child(1) {
              width: auto;
              height: 24px;
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
            }
            li:nth-child(2) {
              margin-top: 15px;
              width: auto;
              height: 20px;
              font-size: 12px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.45);
            }
            li:nth-child(3) {
              width: auto;
              p {
                float: left;
                font-size: 24px;
                font-family: HelveticaNeue, HelveticaNeue-Medium;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.65);
              }
              i {
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Medium;
                font-weight: 500;
                width: 14px;
                height: 20px;
                display: block;
                float: right;
                margin: 8px 3px 0 10px;
                color: rgba(0, 0, 0, 0.65);
              }
            }
          }
          .yan {
            width: 40%;
            margin: 60px 20px 0 0;
            height: 53px;

            li:nth-child(1) {
              font-size: 12px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.45);
            }
            li:nth-child(2) {
              width: auto;
              height: 32px;
              font-size: 24px;
              font-family: HelveticaNeue, HelveticaNeue-Medium;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.65);
            }
          }
        }
        .tx {
          width: 100%;
          height: 41px;
          span:nth-child(1) {
            display: inline-block;
            margin: 6px 8px 13px 21px;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
          }
          span:nth-child(2) {
            display: inline-block;
            width: 10px;
            height: 11px;
            border: 1px solid red;
            margin-top: 12px;
            margin-right: 4px;
            font-size: 10px;
            font-family: LastResort;
            color: #f5222d;
            line-height: 11px;
            text-align: center;
          }
        }
      }
      .mu {
        width: 33.3%;
        height: 174px;
        margin-right: 15px;
        border: 1px solid #e8e8e8;
        display: flex;
        flex-wrap: wrap;
        .ts {
          .du {
            margin: 21px 0 0 26px;
            li:nth-child(1) {
              width: auto;
              height: 24px;
              font-size: 14px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.85);
              line-height: 24px;
            }
            li:nth-child(2) {
              width: auto;
              margin: 30px 0 19px 0;
              height: 38px;
              font-size: 30px;
              font-family: HelveticaNeue;
              color: rgba(0, 0, 0, 0.85);
              line-height: 38px;
            }
            li:nth-child(3) {
              width: 210px;
              height: 8px;
            }
          }
        }
      }
    }
    .tavs {
      margin: 19px 0 12px 0;
      width: 100%;
      display: flex;
      flex-grow: 1;
      height: 24px;
      justify-content: space-between;
      h3 {
        width: 20%;
        text-align: left;
        height: 24px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
      }
      p {
        width: 20%;
        text-align: right;
        height: 24px;
        line-height: 22px;
        opacity: 0.82;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        margin-right: 17px;
      }
    }
    .tabales {
      width: 100%;
      height: auto;
      display: flex;
    }
    .pags {
      margin-top: 10px;
      width: 100%;
      text-align: center;
      height: 32px;
    }
  }
}
</style>
